<template>
  <div class="areaRankTotal" :style="{width:rankwidth}">
      <div class="center_bottom">
          <div class="botton_rank">
            <div class="bottom_left">
                <div class="left_topp">
                    <div class="top_onerank">
                        <h3>部门总排名</h3>
                        <a-table  bordered :dataSource="totalrank" :columns="columns" :rowKey="(record, index) => index" :pagination="false">
                            <template slot="sort" slot-scope="text, record">{{record.totrank}}</template>
                            <template slot="area" slot-scope="text, record">{{record.department_name}}</template>
                            <template slot="rank" slot-scope="text, record">{{record.sum_integral}}</template>
                        </a-table>
                    </div>
                    
                </div>
            </div>
            <div class="bottom_right">
                <div class="top_onerank">
                        <h3>部门平均排名</h3>
                        <a-table  bordered :dataSource="avgrank" :columns="columns1" :rowKey="(record, index) => index" :pagination="false">
                            <template slot="sort" slot-scope="text, record">{{record.totrank}}</template>
                            <template slot="area" slot-scope="text, record">{{record.department_name}}</template>
                            <template slot="rank" slot-scope="text, record">{{record.avg_integral}}</template>
                        </a-table>
                    </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getmytotalrankData} from '../../api/usercenter'
export default {
    data() {
        return {
            columns: [
              { title: "排名", scopedSlots: { customRender: "sort" }, width: 80 },
              {
                title: "部门",
                scopedSlots: { customRender: "area" }
              },
              {
                title: "总积分",
                scopedSlots: { customRender: "rank" }
              },
            ],
            columns1: [
              { title: "排名", scopedSlots: { customRender: "sort" }, width: 80 },
              {
                title: "部门",
                scopedSlots: { customRender: "area" }
              },
              {
                title: "平均积分",
                scopedSlots: { customRender: "rank" }
              },
            ],
            totalrank:[
                {
                    totrank:0,
                    sum_integral:0,
                    department_name:''
                }
            ],
            avgrank:[
                {
                    totrank:0,
                    sum_integral:0,
                    avg_integral:''
                }
            ],
        }
    },
    mounted(){
        this.mmnnvv()
        this.bvxxa()
    },
    methods:{
        mmnnvv(){
            getmytotalrankData().then(res=>{
                this.totalrank = res.sum
                function compare(property){
                    return function(a,b){
                        var value1 = a[property];
                        var value2 = b[property];
                        return value1 - value2;
                    }
                }
                this.totalrank.sort(compare('sum_integral')).reverse()
                this.totalrank.map((item,index)=>{
                    item.totrank = index+1
                })
            })
        },
        bvxxa(){
            getmytotalrankData().then(res=>{
                this.avgrank = res.avg
                function compare(property){
                    return function(a,b){
                        var value1 = a[property];
                        var value2 = b[property];
                        return value1 - value2;
                    }
                }
                this.avgrank.sort(compare('avg_integral')).reverse()
                this.avgrank.map((item,index)=>{
                    item.totrank = index+1
                })
            })
        }
    },
    computed:{
        rankwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
}
</script>

<style lang='less'>
.areaRankTotal{
    margin: 0 auto;
    .center_bottom{
        width: 80%;
        margin: 0 auto;
        padding: 10px;
        padding: 55px 0 35px 0;
        .botton_rank{
            background: white;
            padding: 18px;
            .bottom_left{
                .left_topp{
                    .top_onerank:nth-of-type(2){
                        margin-top: 25px;
                    }
                }
            }
        }
    }
    .bottom_right{
        margin-top: 50px;
    }
}
</style>